import React, {useState, useRef, useContext, useEffect} from 'react';
import {
  StyleSheet,
  Text,
  View,
  ImageBackground,
  StatusBar,
  Animated,
  TouchableWithoutFeedback,
  PanResponder,
} from 'react-native';
import Avatar from '../../../components/avatar';
import IconButton from '../../../components/IconButton';
import Viewpager from '@react-native-community/viewpager';
import {FlatList} from 'react-native-gesture-handler';
import drawerContext from '../../../context/drawerContext';

const me = () => {
  const [pan, setpan] = useState(null);
  const viewpagerRef = useRef();
  const [width] = useState(new Animated.Value(0));
  const [left] = useState(new Animated.Value(0));
  const [activeIndex, setactiveIndex] = useState(0);
  const openDrawer = useContext(drawerContext);
  useEffect(() => {
    let pan = PanResponder.create({
      // 要求成为响应者：
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderMove: (evt, gestureState) => {
        if (gestureState.dx <= -80) {
          openDrawer();
        }
      },
    });
    setpan(pan);
  }, []);
  return (
    <View
      // {...pan.panHandlers}
      style={{
        flex: 1,
        backgroundColor: '#161722',
      }}>
      <StatusBar barStyle="light-content" />
      <ImageBackground
        style={{
          width: '100%',
          height: 200,
        }}
        source={{
          uri:
            'https://img04.sogoucdn.com/app/a/100520093/d328ab8f8bcf1688-cee9f2791250b5c7-dfba32bfffdd2a3ee214fa0c313185d8.jpg',
        }}>
        <View
          style={{
            backgroundColor: '#24262f',
            position: 'absolute',
            right: 10,
            top: 40,
            borderRadius: 25,
            padding: 8,
          }}>
          <IconButton
            name="bars"
            color="#fff"
            onPress={() => {
              openDrawer();
            }}
          />
        </View>
      </ImageBackground>
      <View
        style={{
          flexDirection: 'row',
          paddingLeft: 5,
          paddingRight: 5,
          alignItems: 'center',
          marginTop: -5,
        }}>
        <View
          style={{
            borderWidth: 5,
            borderColor: '#161722',
            marginTop: -20,
            borderRadius: 50,
          }}>
          <Avatar
            size="big"
            uri="https://img01.sogoucdn.com/net/a/04/link?appid=100520040&url=https://i02piccdn.sogoucdn.com/653cc050e0608363"
          />
        </View>
        <Text style={[styles.textBtn, {flex: 1}]}>编辑资料</Text>
        <Text style={[styles.textBtn, {width: 80}]}>+好友</Text>
      </View>
      <View style={{width: '100%', flexDirection: 'row', marginTop: 20}}>
        {['作品', '动态', '喜欢'].map((v, k) => {
          return (
            <TouchableWithoutFeedback
              key={k}
              onPress={() => {
                viewpagerRef.current.setPage(k);
                setactiveIndex(k);
                Animated.timing(left, {
                  toValue: k,
                  duration: 100,
                  useNativeDriver: true,
                }).start();
              }}>
              <Text
                style={[
                  styles.tabsText,
                  activeIndex === k ? styles.activeText : '',
                ]}>
                {v}
              </Text>
            </TouchableWithoutFeedback>
          );
        })}
        <Animated.View
          style={{
            position: 'absolute',
            bottom: -10,
            width: '33%',
            height: 3,
            backgroundColor: '#f4cf4c',
            transform: [
              {
                translateX: left.interpolate({
                  inputRange: [0, 1, 2],
                  outputRange: [0, 160, 320],
                }),
              },
            ],
          }}
        />
      </View>
      <Viewpager
        initialPage={activeIndex}
        style={{flex: 1}}
        ref={viewpagerRef}
        onPageSelected={(e) => {
          Animated.timing(left, {
            toValue: e.nativeEvent.position,
            duration: 100,
            useNativeDriver: true,
          }).start();
        }}>
        {['zp', 'dt', 'xh'].map((v, k) => {
          return (
            <View key={v}>
              <FlatList
                style={{marginTop: 10}}
                data={[
                  'http://cloud.axureshop.com/gsc/S4UIH5/da/75/dd/da75dd5e8ba042348961ec8e816a9d3a/images/%E6%88%91/p143.png?token=dd02944cf00606d6a88a8388b67ae9114408f04c0b2a5f4b9b6d1be0daf5bd98',
                  'http://cloud.axureshop.com/gsc/S4UIH5/da/75/dd/da75dd5e8ba042348961ec8e816a9d3a/images/%E6%88%91/p142.png?token=dd02944cf00606d6a88a8388b67ae9114408f04c0b2a5f4b9b6d1be0daf5bd98',
                  'http://cloud.axureshop.com/gsc/S4UIH5/da/75/dd/da75dd5e8ba042348961ec8e816a9d3a/images/%E6%88%91/p144.png?token=dd02944cf00606d6a88a8388b67ae9114408f04c0b2a5f4b9b6d1be0daf5bd98',
                  'http://cloud.axureshop.com/gsc/S4UIH5/da/75/dd/da75dd5e8ba042348961ec8e816a9d3a/images/%E6%88%91/p145.png?token=dd02944cf00606d6a88a8388b67ae9114408f04c0b2a5f4b9b6d1be0daf5bd98',
                  'http://cloud.axureshop.com/gsc/S4UIH5/da/75/dd/da75dd5e8ba042348961ec8e816a9d3a/images/%E6%88%91/p146.png?token=dd02944cf00606d6a88a8388b67ae9114408f04c0b2a5f4b9b6d1be0daf5bd98',
                  'https://img20.360buyimg.com/jdcms/s150x150_jfs/t1/59558/8/10755/172881/5d836ce2Edb7de5ec/d02a647ed5635fe4.jpg.webp',
                ]}
                keyExtractor={(item, index) => index.toString()}
                renderItem={(item) => {
                  return (
                    <ImageBackground
                      style={{flex: 1, height: 230, borderWidth: 1}}
                      source={{
                        uri: item.item,
                      }}>
                      <View
                        style={{
                          flexDirection: 'row',
                          position: 'absolute',
                          bottom: 5,
                          left: 0,
                        }}>
                        <IconButton name="caretright" color="#fff" />
                        <Text style={{color: '#fff', marginLeft: 5}}>233</Text>
                      </View>
                    </ImageBackground>
                  );
                }}
                numColumns={3}
              />
            </View>
          );
        })}
      </Viewpager>
    </View>
  );
};

export default me;

const styles = StyleSheet.create({
  textBtn: {
    textAlignVertical: 'center',
    color: '#fff',
    backgroundColor: '#393a43',
    fontSize: 16,
    height: 50,
    lineHeight: 20,
    marginLeft: 5,
    marginRight: 5,
    textAlign: 'center',
  },
  tabsText: {
    width: '33.33%',
    textAlign: 'center',
    fontSize: 16,
    color: '#ccc',
  },
  activeText: {
    color: '#fff',
    fontWeight: 'bold',
  },
});
